<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- 		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> -->


		<link rel="stylesheet" href="css/bootstrap.3.4.1.css">
		<link rel="stylesheet" href="css/main.css">

		<style type="text/css">

		</style>
		<title>其他组件 表/14.9 demo </title>
	</head>


	<!-- 
	 
	 https://v3.bootcss.com/components/#badges
	 
	 徽章
	 给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。
	 
	 
	 警告框

	 https://v3.bootcss.com/components/#alerts
	 
	 
	 -->
	<body>
		
		
		<div>
			
			<div class="alert alert-danger"> 文章已经更新，请刷新页面</div>
			
		</div>
		<h1>
			demo
			其他组件 表/14.9
			https://biaoyansu.com/14.9


			 路径导航
		</h1>


		<div>
			<ol class="breadcrumb">
				<li><a href="#">Home</a></li>
				<li><a href="#">Library</a></li>
				<li class="active">lorem </li><span class="badge badge-de">50k</span>
			</ol>
		</div>

		<h1>Lorem article </h1>

		<span class="label label-default">default</span>
		<span class="label label-primary">js</span>
		<span class="label label-success">http</span>
		<span class="label label-info">database</span>
		<span class="label label-warning">flask</span>
		<span class="label label-danger">java</span>


		<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab maiores odio illo unde nam odit aut totam
			illum ullam. Doloribus eveniet in eaque repellat vero consequatur soluta perferendis repellendus fugit!
		</div>
		<div>Nisi rerum molestiae dolores fuga repellendus cum omnis aperiam ad aut repudiandae iure cumque minus?
			Numquam earum temporibus perferendis distinctio ea incidunt consequatur sunt laborum obcaecati dicta debitis
			in praesentium.</div>
		<div>Quo a deleniti autem dolores consequuntur necessitatibus vero quia neque atque nostrum natus reprehenderit
			quam voluptatum! Blanditiis veniam provident asperiores ratione eveniet eius sunt nobis dicta nesciunt
			assumenda architecto sint.</div>
		<div>Officia voluptatem distinctio ducimus odio. Architecto consectetur neque ad ipsum repellat quod quibusdam
			minima aliquid! Enim reprehenderit animi tenetur eligendi minima facilis asperiores fugit iusto ipsum facere
			eum unde nobis.</div>



		<div class="btn btn-primary">赞一下 <span class="badge">10</span> </div>




		<div class="btn btn-default">赞一下 <span class="badge">10</span> </div>


		<div class="btn btn-info">赞一下 <span class="badge">10</span> </div>

		<div class="btn btn-danger">赞一下 <span class="badge">10</span> </div>

		<div class="btn btn-warning">赞一下 <span class="badge">10</span> </div>
	</body>
</html>
